<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user_file</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/mui.min.js"></script>
<style>
	body{ background: #ffffff;}
	h3{ font-weight: normal;}
	.blue span{ border-color: blue; color: blue;}
	.label_wrap span.active{ background: #009944; color: #ffffff;}
	.blue span.active{ background: blue; color: #ffffff;}
	
</style>
<script src="js/mui.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body>
	<div id="user_file_info">
		<div class="uf_head_wrap">
			<div class="num_add">
				<i class="iconfont">&#xe62b;踩</i>
				<span>0</span>
			</div>
			<div class="head_img">
	        	<img src="" alt="" />
	        </div>
	        <div class="num_add">
	        	<i class="iconfont">&#xe606;赞</i>
				<span>0</span>
	        </div>	
		</div>
		
        <div class="user_wrap uf_user_wrap">
	        <span class="user_name">张强</span>
	        <em class="per_lab">达人</em>
	        <div class="per_rel">
	        	<span><em>好友: </em><samp>58</samp></span>
	        	<span><em>积分: </em><samp>4525</samp></span>
	        </div>	
        </div>
	</div>
	
	<div class="user_top_btn ">
		<span class="nav_btn iconfont">&#xe602;</span>
		<span class="check_file">查看档案</span>
		<span class="note_btn">操作</span>
	</div>
	
	<div class="my_label user_pub1"  id="uf_self_comment"> 
		<h3>自我评价</h3>
		<div class="uf_grade">
			<span>形象： 4分</span>
			<span>谈吐： 3分</span>
			<span>举止： 3分</span>
		</div>
		<div class="label_wrap">
			<span>开朗</span>
			<span>有责任心</span>
			<span>喜欢钻研</span>
			<span>看书,听音乐</span>
			<span>热爱编程</span>
			<span>工作态度积极认真</span>
			<span>优秀</span>
			<span>有爱心</span>
		</div>
	</div>
	<div class="user_pub1" id="uf_other_comment">
		<h3>他人评价</h3>
		<ul>
			<li>
				<i class="iconfont">&#xe633;</i>
				<em>形象</em>
				<span class="comment_star"> 
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
				</span>

			</li>
			<li>
				<i class="iconfont">&#xe632;</i>
				<em>谈吐</em>
				<span class="comment_star">
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
				</span>

			</li>
			<li>
				<i class="iconfont">&#xe632;</i>
				<em>举止</em>
				<span class="comment_star">
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
					<i class="iconfont">&#xe629;</i>
				</span>

			</li>
		</ul>
		
		<div class="label_wrap">
			<span>事业心</span>
			<span>刻苦勤奋</span>
			<span>诚实守信</span>
			<span>细心</span>
			<span>创新能力</span>
			<span>团结</span>
			<span>乐观上进</span>
			<span class="sel_def_btn">自定义...</span>
		</div>
		
		<div class="label_wrap blue">
			<span>乐观上进</span>
			<span>老实</span>
			<span>正直</span>
			<span>实力股</span>
			<span>乐于助人</span>
			<span>礼貌</span>
			<span>友善大方</span>
			<span class="sel_def_btn">自定义...</span>
		</div>
	</div>
	<button class="orange_btn">评价</button>
</body>

<script>
    $('.label_wrap span').click(function(){
    	$(this).toggleClass('active');
    })
</script>

</html>





















